<template>
    <div id="hotSpot">
      <ul class="img" :style="'height:'+imgHeight+'px;line-height:'+imgHeight+'px'">
        <img :src="hotSpotInfo.img_src" :width="imgHeight">
      </ul>
      <ul class="title" :style="'width:'+(imgHeight*3)+'px;height:'+imgHeight+'px;line-height:'+imgHeight+'px'">
        <li><span :style="'width:'+(imgHeight*3)+'px;display:block;'">{{hotSpotInfo.title}}</span></li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "hotSpot",
      props:{
        hotSpotInfo:{},
        imgHeight:Number,
      }
    }
</script>

<style scoped>
#hotSpot{
  padding-bottom: 5px;
  padding-top: 5px;
  overflow: hidden;

}
  #hotSpot ul{
    float: left;
  }
  #hotSpot .img{
    display: flex;
    align-items: center;
  }
  #hotSpot .title{
    padding-left: 10px;
    letter-spacing: 1px;
    font-size:15px;
  }
  #hotSpot .title li span{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
